<template>
  <div class="content">
    <heading grade='1'>教练详情</heading>
    <cellbox>
      <cell-item class="images-show">
        <img :src="train_coach_info.photo">
      </cell-item>
      <cell-item class="coach-detail" style="padding-left: 40px; font-size: 14px;">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>姓名：{{train_coach_info.name}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>性别：{{train_coach_info.sex === 1 ? '男' : '女'}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>国籍：{{train_coach_info.country}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>证件号码：{{train_coach_info.idNo}}</p> 
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>出生日期：{{train_coach_info.birthday ? new Date(train_coach_info.birthday).format('yyyy.MM.dd') : '待完善'}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>联系手机：{{train_coach_info.mobile}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>证书：{{train_coach_info.certificateName ? train_coach_info.certificateName : '待完善'}}</p>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p>备注：{{train_coach_info.remark ? train_coach_info.remark : '无'}}</p>
            </div>
          </el-col>
        </el-row>
      </cell-item>
    </cellbox>

    <div class="main">
      <div class="divide"></div>
      <el-tabs v-model="activeName">
        <el-tab-pane label="授课课程" name="first">
          <div class="coach-table" v-if="train_coach_course.list&&train_coach_course.list.length">
            <el-table
              :data="train_coach_course.list"
              style="width: 100%"
              stripe
              >
              <el-table-column
                label="序号" align="center">
                <template scope="scope">
                  {{scope.$index + 1}}
                </template>
              </el-table-column>
              <el-table-column
                prop="courseName"
                label="课程名称"
                align="center" 
                width="170">
              </el-table-column>
              <el-table-column
                prop="schoolName"
                label="校区" 
                align="center" 
                width="190">
              </el-table-column>
              <el-table-column
                prop="classNum"
                label="授课班级数" 
                align="center">
              </el-table-column>
              <el-table-column
                prop="studentNum"
                label="学生总人次" 
                align="center">
              </el-table-column>
            </el-table>
            <el-pagination
              v-bind="getPaginationProps(train_coach_course)"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              >
            </el-pagination>
          </div>
          <placeholder v-else text="暂无课程" src="/static/images/training/no_course.png" />
        </el-tab-pane>
        <el-tab-pane label="教练简介" name="second">
          <div class="coach-content">
            {{train_coach_info.intro}}
            <preview-box>
              <el-carousel
                height="320px"
                :slides="4"
                :autoplay="false"
                indicator-position="outside">
                <x-carousel-item class="carousel-item" v-for="(item, index) in train_coach_info.certificateImages" :key="index">
                    <img class="carousel-img" v-bind:src="item">
                </x-carousel-item>
              </el-carousel>
            </preview-box>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import {pagingList} from 'utils/mixins'
import { mapGetters } from 'vuex'
export default {
  mixins: [pagingList],
  computed: {
    ...mapGetters({
      train_coach_course: 'train_coach_course', // 授课课程
      train_coach_info: 'train_coach_info' // 教练信息
    })
  },
  data () {
    return {
      activeName: 'first'
    }
  },
  created () {
    this.$store.dispatch('train_coach_course', {teacherId: this.$route.params.id})
    this.$store.dispatch('train_coach_info', {teacherId: this.$route.params.id})
  }
}
</script>

<style lang="scss">
.content {
  .coach-table 
    tbody {
      tr {
      font-size: 12px;
    }
  }
}
</style>

<style lang="scss" scoped>
@import '~styles/var';
.content {
  .images-show {
    height: 322px;
    width: 457px;
    img {
      height: 322px;
      width: 457px;
    }
  }
  .coach-detail {
    .el-row {
      margin-bottom: 25px;
    }
  }
  .main {
    min-height: 100%;
    background: #fff;
    .divide {
      margin: 30px -60px 0;
      border-top: 20px solid $background-color;
    }
    .coach-table {
      margin-top: 20px;
    }
    .coach-content {
      font-size: 16px;
    }
  }
}
</style>
